<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<link href="css/style_new.css" rel="stylesheet" type="text/css">
	<link href="flashDemo/css/jquery-ui.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="flashDemo/js/jquery.js" charset='UTF-8'></script>
	<script type="text/javascript" src="flashDemo/js/jquery-ui.js" charset='UTF-8'></script>
	<script type="text/javascript" src="flashDemo/js/groupData.js" charset='UTF-8' ></script>
	<script type="text/javascript" src="flashDemo/js/dynamicColumnOper.js" charset='UTF-8' ></script>
	<script type="text/javascript">
		$(document).ready(function(){
			try{
				
				$(".date").datepicker() ;
			}catch(e){alert(e.message)}
		});
		function update(){
			var colList = new Array() ;
			var valueArray = new Array() ;
			
			$("#value input").each(function(){
				if($(this).attr("checked")){
					valueArray.push($(this).attr('value')) ;	
				}
			}) ;
			
			$(".condition").each(function(){//遍历条件
				var isValidOption = !!$(this).find("input").attr("checked") ;
				if(!isValidOption) return ;
				
				var id = $(this).attr("id") ;
				colList.push(id) ;
			}) ;
			
			var configObj = {
					colNameArray:colList,
					valueNameArray:valueArray 
			} ;
			var tmp = new dynamicTable('demobody',groupData,configObj);
			tmp.renderTable() ;
			generateHead() ;
		}
		function generateHead(){
			var dimList = new Array() ;
			$(".condition").each(function(){//遍历条件
				var isValidOption = !!$(this).find("input").attr("checked") ;
				if(!isValidOption) return ;
				
				var id = $(this).attr("role") ;
				dimList.push(id) ;
			}) ;
			
			var itemList = new Array() ;
			$("#value input").each(function(){
				if($(this).attr("checked")){
					itemList.push($(this).parent().text()) ;	
				}
			}) ;
			
			var order = $("#demohead") ;
			order.html("") ;
			var tmpRow = $("<tr></tr>") ;
			order.append(tmpRow) ;
			for(var i = 0 ; i < dimList.length ; i ++){
				var tmpCell = $("<td></td>") ;
				tmpCell.text(dimList[i]) ;
				tmpRow.append(tmpCell) ;
			}
			
			for(var i = 0 ; i < itemList.length ; i ++){
				var tmpCell = $("<td></td>") ;
				tmpCell.text(itemList[i]) ;
				tmpRow.append(tmpCell) ;
			}
		}
	</script>
	<style>
		#demo td{
			border:solid 1px #cccccc ;
			white-space: nowrap;
		}
		#demo{
			margin:10px ;
			border-collapse: collapse; 
		}
		html,body{
			height: 100%;
			width: 100% ;
		}
		tbody td{
			text-align: right; 
		}
		.left{
			text-align:left ;
		}
		.itemCondition{
			
		}
		.conditionTable{
			border:dashed 1px #cccccc ;
			margin:10px ;
			width: 400px ;
			display:inline ;
		}
		.conditionTable td{
			white-space: nowrap;
			text-align: left ;
		}
		.demoTitle{
			border-bottom: 1px dashed #cccccc ;
			padding-bottom: 13px ;
		}
	</style>
</head>
<body>
	<table cellspacing="10px"  class='conditionTable'>
		<tr >
			<td class='demoTitle' colspan=4>维度选择</td>
		</tr>
		<tr>
			<td colspan=4>时间：<input class='date' value=""/>至<input class='date' value=""/></td>
		</tr>
		<tr>
			<td><span class="condition" id="province" role='省份'> <input
					type='checkbox' />省份
			</span></td>
			<td><span class="condition" id="comName" role='公司'> <input
					type='checkbox' />公司
			</span></td>
			<td><span class="condition" id="riskType" role='险种'> <input
					type='checkbox' />险种
			</span></td>
			<td><span class="condition" id="carType" role='车辆种类'> <input
					type='checkbox' />车辆种类
			</span></td>
		</tr>
		<tr>
			<td><span class="condition" id="sellRoad" role='销售渠道'> <input
					type='checkbox' />销售渠道
			</span></td>
			<td><span class="condition" id="useType" role='使用性质'> <input
					type='checkbox' />使用性质
			</span></td>
		
			<td><span class="condition" id="isReInsure" role='是否转保'>
					<input type='checkbox' />是否转保
			</span></td>
			<td><span class="condition" id="rateChange" role='浮动费率分段'>
					<input type='checkbox' />浮动费率分段
			</span></td>
		</tr>
		<tr>
			<td><span class="condition1"> <input type='checkbox' />新旧车
			</span></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<span class='itemCondition' id='value'>
		<table cellspacing="10px" class='conditionTable'>
			<tr>
				<td class='demoTitle' colspan=4>指标选择</td>
			</tr>
			<tr>
				<td><span> <input type='checkbox' value='chaXunJianShu' />查询件数
				</span></td>
				<td><span> <input type='checkbox' value='queRenJianShu' />确认件数
				</span></td>
				<td><span> <input type='checkbox'
						value='chaXunQianDanBi' />查询签单比
				</span></td>
				<td><span> <input type='checkbox' value='queRenBaoFei' />确认保费
				</span></td>
			</tr>
			<tr>
				<td><span> <input type='checkbox' value='piGaiJianShu' />批改件数
				</span></td>
				<td><span> <input type='checkbox' value='piGaiBaoFei' />批改保费
				</span></td>
				<td><span> <input type='checkbox' value='yiZhuanBaoFei' />已赚保费
				</span></td>
				<td><span> <input type='checkbox' value='baoAnJianShu' />报案件数
				</span></td>
			</tr>
			<tr>
				<td><span> <input type='checkbox' value='liAnJianShu' />立案件数
				</span></td>
				<td><span> <input type='checkbox' value='jieAnJianShu' />结案件数
				</span></td>
				<td><span> <input type='checkbox' value='yiJuePeiKuan' />已决赔款
				</span></td>
				<td><span> <input type='checkbox' value='weiJuePeiKuan' />未决赔款
				</span></td>
			</tr>
			<tr>
				<td><span> <input type='checkbox' value='jianDanPeiFuLv' />简单赔付率
				</span></td>
				<td><span> <input type='checkbox'
						value='liNianZhiPeiFuLv' />历年制赔付率
				</span></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</span>
	<div></div>
  <input style='margin:10px' type='button' onClick='javascript:update()' value="查询" />
  </div>
	 <table id="demo">
	 	<thead id="demohead">
	 	</thead>
		<tbody id="demobody">
		</tbody>
     </table>
</body>
</html>